<template>
    <!-- 顶部导航栏 -->
    <view class="navbar" :style="{backgroundColor: pafeColorList[pageColorIndex]}">
        <view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
        <view class="titleBar" :style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}" >
            <view class="title" v-if="show">
                <text :style="{color: colorList[fontColorIndex]}">第{{currentChapter.chapterIndex}}章 {{currentChapter.title}}</text>
            </view>
        </view>
    </view>
    
    <!-- 弹出式导航栏 -->
    <view class="popup-navbar" 
          :style="{
              transform: showPopup ? 'translateY(0)' : 'translateY(-100%)',
              transition: 'transform 0.3s ease-in-out',
              height: popupHeight + 'px',
              backgroundColor: pafeColorList[pageColorIndex]
          }"
          v-if="showPopup">
        <view class="popup-content">
            <view class="nav-icon" @click="navigateBack">
                <uni-icons type="left" size="24" :color="colorList[fontColorIndex]"></uni-icons>
            </view>
            <view class="nav-title" :style="{color: colorList[fontColorIndex]}">
                {{currentChapter.title}}
            </view>
            <view class="nav-icon" @click="downloadChapter">
                <uni-icons type="download" size="24" :color="colorList[fontColorIndex]"></uni-icons>
            </view>
        </view>
    </view>
    
    <!-- 底部弹出层 -->
    <view class="bottom-popup" 
          :style="{
              transform: showBottomPopup ? 'translateY(0)' : 'translateY(100%)',
              transition: 'transform 0.3s ease-in-out',
              backgroundColor: pafeColorList[pageColorIndex]
          }"
          v-if="showBottomPopup">
        <view class="bottom-content">
            <!-- 滑动条区域 -->
            <view class="slider-area">
                <text class="nav-text" :style="{color: colorList[fontColorIndex]}" @click="prevChapter">上一章</text>
                <slider class="slider" 
                    :value="displayChapterIndex" 
                    :min="1" 
                    :max="chapters.length" 
                    show-value
                    :value-text-color="colorList[fontColorIndex]"
                    @change="handleChapterChange" />
                <text class="nav-text" :style="{color: colorList[fontColorIndex]}" @click="nextChapter">下一章</text>
            </view>
            <!-- 图标区域 -->
            <view class="icon-area">
                <view class="icon-item" @click="openCatalog">
                    <uni-icons type="list" size="24" :color="colorList[fontColorIndex]"></uni-icons>
                    <text class="icon-text" :style="{color: colorList[fontColorIndex]}">目录</text>
                </view>
                <view class="icon-item" @click="toggleNightMode">
                    <uni-icons type="eye" size="24" :color="colorList[fontColorIndex]"></uni-icons>
                    <text class="icon-text" :style="{color: colorList[fontColorIndex]}">
                        {{modeText}}
                    </text>
                </view>
                <view class="icon-item" @click="openSettings">
                    <uni-icons type="gear" size="24" :color="colorList[fontColorIndex]"></uni-icons>
                    <text class="icon-text" :style="{color: colorList[fontColorIndex]}">设置</text>
                </view>
            </view>
        </view>
    </view>
    
    <!-- 设置弹出层 -->
    <view class="settings-popup" 
          :style="{
              transform: showSettingsPopup ? 'translateY(0)' : 'translateY(100%)',
              transition: 'transform 0.3s ease-in-out',
              backgroundColor: pafeColorList[pageColorIndex]
          }"
          v-if="showSettingsPopup"
          @click.stop>
        <view class="settings-content">
            <!-- 字体大小设置 -->
            <view class="font-setting">
                <text class="setting-label" :style="{color: colorList[fontColorIndex]}">字体</text>
                <view class="font-size-controls">
                    <text class="font-btn" :style="{color: colorList[fontColorIndex]}" @click="decreaseFontSize">A-</text>
                    <text class="font-size-display" :style="{color: colorList[fontColorIndex]}">{{ fontSize }}</text>
                    <text class="font-btn" :style="{color: colorList[fontColorIndex]}" @click="increaseFontSize">A+</text>
                </view>
            </view>
            
            <!-- 背景颜色设置 -->
            <view class="background-setting">
                <text class="setting-label" :style="{color: colorList[fontColorIndex]}">背景</text>
                <scroll-view class="color-scroll" scroll-x show-scrollbar="false">
                    <view class="color-options">
                        <view class="color-option" 
                              v-for="(color, index) in pafeColorList" 
                              :key="index"
                              :style="{backgroundColor: color}"
                              @click="changeBackgroundColor(index)">
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
    
    <!-- 目录弹出层 -->
    <view class="catalog-popup" 
          :style="{
              transform: showCatalogPopup ? 'translateY(0)' : 'translateY(100%)',
              transition: 'transform 0.3s ease-in-out',
              backgroundColor: pafeColorList[pageColorIndex]
          }"
          v-if="showCatalogPopup"
          @click.stop>
        <view class="catalog-header">
            <image class="cover" src="/static/test/1.jpg" mode="widthFix"></image>
            <view class="book-info">
                <text class="book-title" :style="{color: colorList[fontColorIndex]}">{{currentBook.title}}</text>
                <text class="book-author" :style="{color: colorList[fontColorIndex]}">{{currentBook.author}}</text>
            </view>
            <view class="close-icon" @click="closeCatalog">
                <uni-icons type="close" size="24" :color="colorList[fontColorIndex]"></uni-icons>
            </view>
        </view>
        <scroll-view class="catalog-content" scroll-y show-scrollbar="false">
            <view class="chapter-item" 
                  v-for="(chapter, index) in chapters" 
                  :key="index" 
                  @click="selectChapter(index)">
                <view class="chapter-info">
                    <text class="chapter-title" :style="{color: colorList[fontColorIndex]}">{{chapter.title}}</text>
                    <text class="update-time" :style="{color: updateTimeColor}">
                        {{ formatChapterTime(chapter.updateTime) }}
                    </text>
                </view>
            </view>
        </scroll-view>
    </view>
    
    <!-- 填充区域 -->
    <view class="fill" :style="{height:getNavBarHeight() +'px'}"></view>
    
    <!-- 显示分页内容 -->
    <view class="html-content" 
          :style="{'background-color': pafeColorList[pageColorIndex]}"
          @click="handleScreenClick">
        <swiper class="center" 
            :current="currentPage" 
            :circular="true"
            :indicator-dots="false" 
            :autoplay="false" 
            :style="{height: screenHeight + 'px'}" 
            @change="handlePageChange">
            
            <swiper-item v-for="(page, index) in pages" :key="index">
                <view class="page-content" 
                      :style="{
                          'color': colorList[fontColorIndex],
                          'font-size': fontSize + 'px',
                          'line-height': lineHeight + 'px',
                          'padding': '5px 20px 20px 20px'
                      }">
                    <view v-if="index === 0" class="title" :style="{
                        'color': colorList[fontColorIndex],
                        'font-weight': 'bold',
                        'text-align': 'center'
                    }">
                        {{currentChapter.title}}
                    </view>
                    <view v-html="page"></view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>
import { ref, computed, onMounted, } from 'vue';
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconLeft } from "@/utils/system.js";
import { ApiReadCount, ApigetHistoryByNovelId, ApiSaveHistory ,ApiSaveTime} from "/pages/api/novel.js";

// 时间格式化函数（修正版）
const formatChapterTime = (timeValue) => {
    if (!timeValue) return '--'; // 处理空值
    
    let date;
    // 处理时间戳（数字类型）
    if (typeof timeValue === 'number') {
        date = new Date(timeValue);
    } 
    // 处理字符串类型（兼容自定义格式和ISO格式）
    else if (typeof timeValue === 'string') {
        // 检查是否为自定义格式：YYYY-MM-DD-HH-mm
        const parts = timeValue.split('-');
        if (parts.length === 5) {
            const year = parseInt(parts[0], 10);
            const month = parseInt(parts[1], 10) - 1; // 月份从0开始
            const day = parseInt(parts[2], 10);
            const hour = parseInt(parts[3], 10);
            const minute = parseInt(parts[4], 10);
            
            date = new Date(year, month, day, hour, minute);
        } else {
            // 尝试使用ISO格式解析
            date = new Date(timeValue);
        }
    } else {
        return '--';
    }
    
    // 验证日期是否有效
    if (isNaN(date.getTime())) {
        return '--';
    }
    
    // 补零函数
    const padZero = (n) => n.toString().padStart(2, '0');
    
    // 格式化为：YYYY-MM-DD:HH:mm
    return [
        date.getFullYear(),
        padZero(date.getMonth() + 1),
        padZero(date.getDate())
    ].join('-') + ':' + [
        padZero(date.getHours()),
        padZero(date.getMinutes())
    ].join(':');
};

// 组件状态
const screenHeight = ref(0);
const screenWidth = ref(0);
const currentPage = ref(0);
const pages = ref([]);
const showPopup = ref(false);
const showBottomPopup = ref(false);
const popupHeight = ref(getTitleBarHeight() + 10);
const showSettingsPopup = ref(false);
const showCatalogPopup = ref(false);

// 阅读样式配置
const fontSize = ref(16);
const lineHeight = ref(fontSize.value * 1.8); // 行高与字体大小关联
const show = ref(false);

// 颜色配置
const pafeColorList = ['#f5f3eb', '#2c2c2c', '#f0e6d2', '#e0f0e6', '#d2e3f5', '#f5d2e3', '#e6e0d2', '#000000'];
const colorList = ['#333333', '#ffffff'];
const pageColorIndex = ref(0);
const fontColorIndex = ref(0);
const updateTimeColor = ref('#666'); // 更新时间颜色（更清晰的灰色）

// 小说信息
const currentBook = ref({});

// 章节数据
const chapters = ref([]);

// 当前章节状态
const currentChapterIndex = ref(0);
const currentChapter = ref({});

// 显示的章节索引（1-based）
const displayChapterIndex = computed({
    get() {
        return currentChapterIndex.value + 1;
    },
    set(value) {
        currentChapterIndex.value = value - 1;
    }
});

// 新增：阅读历史相关状态
const currentPageInHistory = ref(0); // 历史记录中的页码

//更新阅读次数
const UpdateRead = async()=>{
    await ApiReadCount(currentBook.value.novelId)
}

// 加载阅读历史
const loadReadingHistory = async (novelId) => {
    if (!novelId) return; 
    const res = await ApigetHistoryByNovelId(currentBook.value.novelId)
    if (res != null) {
        // 找到对应章节，跳转到历史记录位置
        currentChapterIndex.value = res.chapter.chapterIndex;
        currentPageInHistory.value = res.page;
        
        // 更新当前章节数据
        currentChapter.value = chapters.value[res.chapter.chapterIndex - 1];
        
        // 重新计算分页并跳转到历史页码
        await calculateContentPages().then(() => {
            // 确保页码不超过当前章节总页数
            currentPage.value = Math.min(currentPageInHistory.value, pages.value.length - 1);
        });
        
        console.log(`已加载历史记录：章节ID=${res.chapterId}，页码=${res.page}`);
    } else {
        // 没有历史记录，使用第一章节
        console.log('没有找到阅读历史，使用第一章节');
        initDefaultChapter();
    }
};

// 初始化默认章节
const initDefaultChapter = () => {
    if (chapters.value.length > 0) {
        currentChapterIndex.value = 0;
        currentChapter.value = chapters.value[0];
        currentPageInHistory.value = 0;
        
        calculateContentPages().then(() => {
            currentPage.value = 0;
        });
    }
};

// 保存阅读历史
const saveReadingHistory = async () => {
    // 修正拼写错误：将curresntBook改为currentBook
    if (!currentBook.value.novelId || !currentChapter.value.chapterIndex) {
        console.warn('缺少必要信息，无法保存阅读历史');
        return;
    }
    
    try {
        await ApiSaveHistory(
            currentBook.value.novelId,
            currentChapter.value.chapterIndex,
            currentPage.value
        );
        
        console.log(`已保存阅读历史：小说ID=${currentBook.value.novelId}，章节ID=${currentChapter.value.id}，页码=${currentPage.value}`);
    } catch (error) {
        console.error('保存阅读历史失败:', error);
        uni.showToast({ title: '保存阅读进度失败', icon: 'none' });
    }
};

//定义一个用户阅读时间的变量
const startTime = ref(0)
// 页面加载
onLoad(async (options) => {
    // 解析传递的小说数据
    const novelData = JSON.parse(decodeURIComponent(options.novelData));
    
    // 移除对updateTime的格式转换，让formatChapterTime函数处理所有格式
    chapters.value = novelData.chapters || [];
    currentBook.value = novelData || {};
    // // 初始化时获取历史记录
    await loadReadingHistory(currentBook.value.novelId);
    
    show.value = true;
    //更新阅读次数
    UpdateRead();
	// 记录开始时间
	startTime.value = new Date().getTime(); // 获取当前时间的毫秒值
});

// 计算内容分页（优化版）
const calculateContentPages = () => {
    return new Promise((resolve) => {
        const content = currentChapter.value.content || '';
        // 修正：减去实际的内容内边距（顶部5px + 底部20px）
        const pageHeight = screenHeight.value - 25; 
        
        // 修正可用宽度计算（扣除左右内边距20px×2=40px）
        const contentPadding = 20 * 2;
        const availableWidth = screenWidth.value - contentPadding;
        
        // 计算每行字符数（使用更准确的系数0.8，适用于中文字符）
        const charsPerLine = Math.floor(availableWidth / (fontSize.value * 0.8));
        const linesPerPage = Math.floor(pageHeight / lineHeight.value);
        const charsPerPage = charsPerLine * linesPerPage;
        
        pages.value = [];
        let startIndex = 0;
        
        // 智能内容分割（避免在单词或标点中间截断）
        while (startIndex < content.length) {
            // 计算理论上的页末位置
            const endIndexTemp = Math.min(startIndex + charsPerPage, content.length);
            let endIndex = endIndexTemp;
            
            // 尝试找到最近的语义分割点（标点符号或空格）
            const splitRegex = /[。！？\n\s,.!?]/;
            for (let i = endIndexTemp; i >= startIndex; i--) {
                if (splitRegex.test(content[i])) {
                    endIndex = i + 1; // 包含分割符
                    break;
                }
            }
            
            // 如果没找到合适的分割点，使用理论位置
            if (endIndex === endIndexTemp && endIndex < content.length) {
                // 向后查找空格或标点
                for (let i = endIndexTemp; i < content.length; i++) {
                    if (splitRegex.test(content[i])) {
                        endIndex = i + 1;
                        break;
                    }
                }
            }
            
            // 添加分页内容
            pages.value.push(content.substring(startIndex, endIndex));
            startIndex = endIndex;
        }
        
        currentPage.value = 0; // 重置当前页到第一页
        resolve(pages.value.length);
    });
};

// 屏幕点击处理
const handleScreenClick = (e) => {
    if (showSettingsPopup.value) {
        showSettingsPopup.value = false;
        return;
    }
    
    const touchX = e.touches[0].clientX;
    const width = screenWidth.value;
    
    const leftBoundary = width * 0.25;
    const rightBoundary = width * 0.75;
    
    if (touchX < leftBoundary) {
        // 左半部分点击，上一页
        if(currentPage.value > 0) {
            currentPage.value--;
        } else {
            if(currentChapterIndex.value > 0) {
                prevChapter();
                setTimeout(() => {
                    currentPage.value = pages.value.length - 1;
                }, 100);
            }
        }
    } else if (touchX > rightBoundary) {
        // 右半部分点击，下一页
        if(currentPage.value < pages.value.length - 1) {
            currentPage.value++;
        } else {
            if(currentChapterIndex.value < chapters.value.length - 1) {
                nextChapter();
            }
        }
    } else {
        // 中间点击，显示/隐藏工具栏
        showPopup.value = !showPopup.value;
        showBottomPopup.value = !showBottomPopup.value;
    }
};

// 导航相关方法
const navigateBack = () => {
    uni.navigateBack({ delta: 1 });
};

const downloadChapter = async () => {
    try {
        uni.showToast({ title: '下载功能暂未实现', icon: 'none' });
    } catch (error) {
        uni.showToast({ title: '下载失败', icon: 'none' });
    }
};

// 章节控制
const handleChapterChange = async (e) => {
    currentChapterIndex.value = e.detail.value - 1;
    currentChapter.value = chapters.value[currentChapterIndex.value];
    await calculateContentPages();
};

const openCatalog = () => {
    showPopup.value = false;
    showBottomPopup.value = false;
    showSettingsPopup.value = false;
    showCatalogPopup.value = true;
};

const closeCatalog = () => {
    showCatalogPopup.value = false;
};

const selectChapter = async (index) => {
    currentChapterIndex.value = index;
    currentChapter.value = chapters.value[index];
    await calculateContentPages(); // 等待分页完成
    closeCatalog();
};

// 模式切换
const modeText = ref('夜间');

const toggleNightMode = () => {
    if (pageColorIndex.value === 0) {
        pageColorIndex.value = 1;
        fontColorIndex.value = 1;
        modeText.value = '白天';
    } else {
        pageColorIndex.value = 0;
        fontColorIndex.value = 0;
        modeText.value = '夜间';
    }
};

// 设置相关
const openSettings = () => {
    showPopup.value = false;
    showBottomPopup.value = false;
    showSettingsPopup.value = true;
};

const decreaseFontSize = () => {
    if (fontSize.value > 12) {
        fontSize.value -= 1;
        lineHeight.value = fontSize.value * 1.8; // 同步更新行高
        calculateContentPages(); // 重新计算分页
    }
};

const increaseFontSize = () => {
    if (fontSize.value < 24) {
        fontSize.value += 1;
        lineHeight.value = fontSize.value * 1.8; // 同步更新行高
        calculateContentPages(); // 重新计算分页
    }
};

const changeBackgroundColor = (index) => {
    pageColorIndex.value = index;
    
    if (index === 1 || index === 7) {
        fontColorIndex.value = 1;
    } else {
        fontColorIndex.value = 0;
    }
};

const prevChapter = async () => {
    if (currentChapterIndex.value > 0) {
        currentChapterIndex.value--;
    } else {
        currentChapterIndex.value = chapters.value.length - 1;
    }
    currentChapter.value = chapters.value[currentChapterIndex.value];
    await calculateContentPages(); // 等待分页完成
    currentPage.value = 0; // 重置到新章节第一页
};

const nextChapter = async () => {
    if (currentChapterIndex.value < chapters.value.length - 1) {
        currentChapterIndex.value++;
    } else {
        currentChapterIndex.value = 0;
    }
    currentChapter.value = chapters.value[currentChapterIndex.value];
    await calculateContentPages(); // 等待分页完成
    currentPage.value = 0; // 重置到新章节第一页
};

const resetToDefault = () => {
    fontSize.value = 16;
    lineHeight.value = fontSize.value * 1.8; // 恢复默认行高
    pageColorIndex.value = 0;
    fontColorIndex.value = 0;
    calculateContentPages(); // 重新计算分页
};

// 页面加载完成
onMounted(async () => {
    try {
        const systemInfo = uni.getSystemInfoSync();
        screenWidth.value = systemInfo.screenWidth;
        screenHeight.value = systemInfo.screenHeight - getNavBarHeight();
        
        // 如果章节已加载，计算分页
        if (currentChapter.value.content) {
            await calculateContentPages();
        }
    } catch (error) {
        console.error('初始化页面失败:', error);
    }
});

// 页面切换事件
const handlePageChange = (e) => {
    currentPage.value = e.detail.current;
};

// 页面卸载时保存历史
onUnload(async () => {
    await saveReadingHistory(); 
	// 记录结束时间
	const endTime = new Date().getTime(); // 获取当前时间的毫秒值
	const readTime = Math.floor((endTime - startTime.value) / (1000 * 60)); // 将毫秒转换为分钟并保留整数
	    
	// 如果阅读时间小于1分钟，则不保存到数据库
	if (readTime >= 1) {
	       await ApiSaveTime(readTime)
	}
});
</script>

<style lang="scss" scoped>
/* 导航栏样式 */
.navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    
    .titleBar{
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        .title{
            font-size: 30rpx;
            font-weight: 700;
        }
    }
}

/* 弹出式导航栏样式 */
.popup-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30;
    transform: translateY(-100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.popup-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
}

.nav-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.fill {
    position: relative;
    width: 100%;
}

.html-content{
    width: 100%;
    z-index: 10;
    box-sizing: border-box;
    height: 100%;
}

.page-content {
    padding: 5px 20px 20px 20px;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.center {
    width: 100%;
}

/* 底部弹出层样式 */
.bottom-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 30;
    transform: translateY(100%);
    padding: 15px 0;
    box-sizing: border-box;
}

.bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.slider-area {
    display: flex;
    align-items: center;
    width: 90%;
    justify-content: space-between;
}

.nav-text {
    font-size: 14px;
    cursor: pointer;
}

.slider {
    flex: 1;
    margin-left: 20px;
}

.icon-area {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 10px 0;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.icon-text {
    font-size: 12px;
}

/* 设置弹出层样式 */
.settings-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 40;
    transform: translateY(100%);
    padding: 20px 15px;
    box-sizing: border-box;
}

.settings-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.font-setting, .background-setting {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.setting-label {
    font-size: 16px;
    line-height: 30px;
    white-space: nowrap;
}

.font-size-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.font-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.font-size-display {
    min-width: 30px;
    text-align: center;
}

.color-scroll {
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 10px;
    box-sizing: border-box;
    
    &::-webkit-scrollbar {
        display: none;
    }
}

.color-options {
    display: inline-flex;
    gap: 10px;
}

.color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ccc;
    cursor: pointer;
    flex-shrink: 0;
}

/* 目录弹出层样式 */
.catalog-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 40;
    transform: translateY(100%);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.catalog-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    position: relative;
    
    .cover {
        width: 60px;
        height: auto;
        margin-right: 15px;
        border-radius: 4px;
    }
    
    .book-info {
        flex: 1;
        margin-right: 15px;
        
        .book-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .book-author {
            font-size: 14px;
            color: #666;
            margin-top: 3px;
            display: block;
        }
    }
    
    .close-icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
}

.catalog-content {
    max-height: 400px;
    padding: 10px 20px;
    
    .chapter-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        transition: all 0.2s ease;
        
        &:hover {
            background-color: rgba(0,0,0,0.03);
        }
    }
    
    .chapter-info {
        .chapter-title {
            font-size: 16px;
        }
        
        .update-time {
            font-size: 12px;
            margin-top: 3px;
            display: block;
            opacity: 0.8;
            letter-spacing: 0.5px;
        }
    }
}

// 隐藏滚动条
::-webkit-scrollbar {
    display: none;
}
</style>